<script lang='ts' setup>
import { defineProps, reactive, defineEmits, ref, PropType } from 'vue'
import Map from '@/components/CesiumMapNoEmit/index.vue'
import type { ElForm } from 'element-plus'
import { solid } from '@/api/map'
type FormInstance = InstanceType<typeof ElForm>
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  solidData: {
    type: Object as PropType<solid>,
    default: () => ({})
  }
})
const areaId = props.solidData.areaId.toString()
const emit = defineEmits(['update:modelValue'])
const areaOption: Array<{ label: string, value: string }> = [{
  label: "蔡甸区",
  value: "0"
}, {
  label: "东西湖区",
  value: "1"
}, {
  label: "汉南区",
  value: "2"
}, {
  label: "黄陂区",
  value: "3"
}, {
  label: "新洲区",
  value: "4"
}, {
  label: "洪山区",
  value: "5"
}, {
  label: "江夏区",
  value: "6"
}, {
  label: "江岸区",
  value: "7"
}, {
  label: "青山区",
  value: "8"
}, {
  label: "江汉区",
  value: "9"
}, {
  label: "硚口区",
  value: "10"
}, {
  label: "武昌区",
  value: "11"
}, {
  label: "汉阳区",
  value: "12"
},]

const ruleFormRef = ref<FormInstance>()
const form = reactive({
  createId: 0,
  name: '',
  areaId: '',
  areaName: '暂无',
  lon: 0,
  lat: 0,
  filePath: ''
})

</script>
<template>
  <el-dialog :modelValue="modelValue" width="40%" @update:modelValue="$emit('update:modelValue', $event)">
    <div class="appBackForm-x">
      <el-row style="font-weight: bold;margin-bottom: 1em;">基本信息</el-row>
      <el-form label-position="top" style="width:100%">
        <el-row>
          <el-col :span="18">
            <el-form-item label="点位名">
              <el-input disabled v-model="solidData.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="地区">
              <el-select disabled placeholder="选择区域" v-model="areaId" style="width: 100%;">
                <el-option v-for="item in areaOption" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="经度">
              <el-input disabled v-model="solidData.lon" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="纬度">
              <el-input disabled v-model="solidData.lat" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div style="height: 20vh;width: 100%;" sk-flex="row">
        <Map :position="{ lon: solidData.lon, lat: solidData.lat }" style="width: 50%;"></Map>
        <div style=" flex: 1;">
          <el-image style="box-sizing: border-box;padding-left: 1em;  width: 90%; height: 100%" :src="solidData.filePath"
            fit="fill" />
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<style lang="scss" scoped>
.el-button--default {
  border-color: #4F8AFF;
  color: #4F8AFF;
}

.appBackForm-x {
  box-sizing: border-box;
  height: 55vh;
  padding: 0 4em;
}

.appBack-from-footer {
  width: 100%;
  height: 100%;
  text-align: left;
  box-sizing: border-box;
  padding-left: 5%;
}
</style>